<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品更新</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
		<style>
			body{
				margin-left: 50px;
				margin-top: 30px;
				width: 80%;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<label>
				分类:<select v-model="classifyId">
					<option v-for="classify in classifyList" v-bind:value="classify.classifyId">
					 {{classify.classifyName}}
					</option>
				</select>
			</label><br>
			<label>名称：<input v-model="goods.goodsName" /></label><br />
			<label>品牌：<input v-model="goods.brand" /></label><br />
			<label>厂家：<input v-model="goods.factory" /></label><br />
			<label>库存：<input v-model="goods.stock" /></label><br />
			<label>价格：<input v-model="goods.price" /></label><br />
			<label>备注：<input v-model="goods.remark" /></label><br />
				<button class="btn btn-warning" v-on:click="updateGoods()">更新</button>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
			classifyList:[],
			classifyId:null,
			goods:null
			},
			methods:{
				findGoodsById:function(goodsId){
					let serverUrl="http://localhost:8088/goods/11";
					console.log(serverUrl);
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.goods=response.data.data;	
						//修改data中商品的分类id 
						vue.classifyId=vue.goods.classifyId;
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				findClassify:function(){
					let serverUrl="http://localhost:8088/classify/"
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.classifyList=response.data.data;
						console.log(response.data)
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				updateGoods:function(goodsId){
					let serverUrl="http://localhost:8088/goods/"
					let data={
						"goodsName": this.goodsName,
						 "classifyId": this.selectId,
						 "factory": this.factory,
						 "stock": this.stock,
						 "price": this.price,
						 "brand": this.brand,
						 "remark": this.remark,
					}
					console.log(serverUrl);
					axios.put(serverUrl,data)
					.then(function(response){
						window.alert(response.data);
						location.href="item.html";
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				
			},
			mounted:function(){
				this.findClassify();
				//获取传过来的商品编号
				var goodsId=location.search;
				console.log(p)
				// p=p.substr(1);
				// var stringArray=p.split("=");
				// var itemId=stringArray[1];
				// console.log(itemId);
				this.findGoodsById(goodsId);
			}
		}
		var vue =new Vue(config);
	</script>
</html>
